<#include "/admin/public.html">
<div class="uk-layui-form">
	<form class="layui-form uk-form" action="/admin/slide/save.html" method="post">
	  <input type="hidden" name="slideList" lay-verify="imgs">
	  <div class="layui-form-item">
	    <label class="layui-form-label">幻灯片上传</label>
	    <div class="layui-input-block">
      		<a class="layui-btn layui-btn-primary" id="browse"><i class="layui-icon">&#xe608;</i>新增文件</a>
	    </div>
	  </div>
	  <div class="layui-form-item">
	  	<div class="row" style="padding:5px;">
			<div class="col-lg-12">
			    <table id="showSlideList" class="layui-hide layui-table" lay-skin="line">
		    		 <colgroup>
							<col width="25%">
							<col width="25%">
							<col width="25%">
							<col width="25%">
						<col>
					  </colgroup>
		    		<thead>
		    			<tr><td>缩列图</td><td>名称</td><td>排序</td><td>操作</td></tr>
		    		</thead>
		    		<tbody></tbody>
		    	</table>
    	 	</div>
    	  </div>
	  </div>
	  <div class="layui-form-button">
	    <div class="layui-button-block">
	      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
	      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
	    </div>
	  </div>
	</form>
</div>
 
<script>

var url = "/upload";
var handleList = [];
//表单验证提交
layui.use('form', function(){
  var form = layui.form();
  form.verify({ 
	  imgs: function(value, item){ 
	      	if(handleList.length <= 0) {
	  	      return '请选择图片';
	  	     }
	  	  }
	});
  form.on('submit(formDemo)', function(data){
		 //获取排序数据
	  $.each( handleList,function(index,item){
		  var orderNumber = $("#tr-" + item.deleteId).find("input").val();
		  item.sort = orderNumber;
	  })
	  
	  $("input[name=slideList]").val(JSON.stringify(handleList));
 }); 
});


//上传初始化
var uploader = new plupload.Uploader({
	browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id
	url: "${base}" + url, //服务器端的上传页面地址
	flash_swf_url: '${ctxStatic}/plupload/js//Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
	silverlight_xap_url: '${ctxStatic}/plupload/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
	filters : {
		mime_types :[ 
			{ title : "Image files", extensions : "jpg,jpeg,png,gif,bmp" }, 
		
	 	],
	 	max_file_size : '1mb',
	},
});

//在实例对象上调用init()方法进行初始化
uploader.init();
//绑定各种事件，并在事件监听函数中做你想做的事
uploader.bind('FilesAdded',function(uploader, files) {
	$("#showSlideList").removeClass("layui-hide")
	$.each(files,function(index,item) {
		var html = '<tr id="tr-' + item.id + '">' +
						'<td><img style="width:30px" src="images/loading-slide.gif" alt=""/></td>'+
						'<td>' + item.name + '</span>' +
						'<td><input class="" style="width:20px" value="'+($('#showSlideList tbody tr').length + 1)+'" /></td>'+
						'<td><a id="' + item.id + '" class="delectFile">删除</a></td>'+
					'</tr>';
		$('#showSlideList tbody').append(html);
	})
	
	//上传后删除事件
	$(".delectFile").click(function() {
		var id = $(this).attr('id');
		uploader.removeFile(uploader.getFile(id))
		$.each(handleList,function(index,item) {
			if(item) {
				if(id == item.deleteId) {
					handleList.splice(index,1);
				}
			}
		})
		$("#tr-" + id).remove();
	});
	
	uploader.start()
	
})

//上传后回调
uploader.bind('FileUploaded', function(uploader,UploadProgress, responseObject) {
	var obj = $.parseJSON(responseObject.response);
	$("#tr-" + UploadProgress.id).find("img").attr("src","/" + obj.filePath );
	var json = {};
	json.title = obj.fileName.split(".")[0];
	json.picurl = obj.filePath;
	json.deleteId = UploadProgress.id;
	handleList.push(json);
});

//报错
uploader.bind('Error',function(up,err) {
	 if(err.code == '-600'){
		 layer.msg('文件最多可上传1M', {icon: 5});
      }	
	
});

</script>